<div class="pl20 pr20 pb20">
    <div class="jqx_group">
        <div class="">
            <span class="pl0 pr0 pt0 pb0 ml0 mr0 mt0 mb0">Tùy Chỉnh Báo Cáo</span>
        </div>
        <div>
            <div style="padding: 4px">

                {{if isset($configs["ChartType"])}}
                    {{if $configs["ChartType"]=="month"}}
                        <table style="margin-bottom: 20px">
                            <tr>
                                <td>Hãy chọn ngày bất kỳ trong tháng</td>
                                <td>
                                    <div style='float: left; margin-top: 0px;margin-bottom: 0px' id='jqxDateTimeInput'></div>
                                </td>
                                <td>
                                    <input type="button" class="classic-button" onclick="swichChart()" id="chart-view" value="Xem"/>
                                </td>

                            </tr>

                        </table>
                        <script>
                            $(document).ready(function () {
                                var theme='classic';
                                $(".jqx_group").jqxExpander({ showArrow: false, toggleMode: 'none', theme: theme });
                                $("#jqxDateTimeInput").jqxDateTimeInput({ width: '270px', height: '25px', theme: theme ,formatString: 'Y'});
                                $('#jqxDateTimeInput ').jqxDateTimeInput('setDate', new Date('{{$configs["year"]}}', {{$configs["month"]}}-1, 1)); 
                            });
                            function swichChart(){
                                var getDate= new Date($('#jqxDateTimeInput').jqxDateTimeInput('getDate')); 
                                $("#chart-content").attr("src","{{base_url()}}admin-planners/chart/Line_Series_Month/"+(getDate.getMonth()+1)+"/"+getDate.getFullYear());
                            }
                        </script>

                    {{elseif $configs["ChartType"]=="year"}}
                        <table style="margin-bottom: 20px">
                            <tr>
                                <td>Năm</td>
                                <td>
                                    <select id="r-year">
                                        <option value="2012">2012</option>
                                        <option value="2013">2013</option>
                                    </select>
                                </td>
                                <td></td>
                                <td>

                                </td>
                                <td>
                                    <input type="button" class="classic-button" onclick="swichChart()" id="report-view" value="Xem"/>
                                </td>
                                <td>

                                </td>
                            </tr>

                        </table>
                        <script>
                            $(document).ready(function () {
                                var theme='classic';
                                $(".jqx_group").jqxExpander({ showArrow: false, toggleMode: 'none', theme: theme });
                                
                            });
                            function swichChart(){
                                
                                $("#chart-content").attr("src","{{base_url()}}admin-planners/chart/Line_Series_Symbol_Year/"+$("#r-year").val());
                            }
                        </script>
                    {{elseif $configs["ChartType"]=="donutyear"}}
                        <table style="margin-bottom: 20px">
                            <tr>
                                <td>Năm</td>
                                <td>
                                    <select id="r-year">
                                        <option value="2012">2012</option>
                                        <option value="2013">2013</option>
                                    </select>
                                </td>
                                <td></td>
                                <td>

                                </td>
                                <td>
                                    <input type="button" class="classic-button" onclick="swichChart()" id="report-view" value="Xem"/>
                                </td>
                                <td>

                                </td>
                            </tr>

                        </table>
                        <script>
                            $(document).ready(function () {
                                var theme='classic';
                                $(".jqx_group").jqxExpander({ showArrow: false, toggleMode: 'none', theme: theme });
                                
                            });
                            function swichChart(){
                                
                                $("#chart-content").attr("src","{{base_url()}}admin-planners/chart/Chart_Donut_Year/"+$("#r-year").val());
                            }
                        </script>
                        {{elseif $configs["ChartType"]=="scalemonth"}}
                        <table style="margin-bottom: 20px">
                            <tr>
                                <td>Hãy chọn ngày bất kỳ trong tháng</td>
                                <td>
                                    <div style='float: left; margin-top: 0px;margin-bottom: 0px' id='jqxDateTimeInput'></div>
                                </td>
                                <td>
                                    <input type="button" class="classic-button" onclick="swichChart()" id="chart-view" value="Xem"/>
                                </td>

                            </tr>

                        </table>
                        <script>
                            $(document).ready(function () {
                                var theme='classic';
                                $(".jqx_group").jqxExpander({ showArrow: false, toggleMode: 'none', theme: theme });
                                $("#jqxDateTimeInput").jqxDateTimeInput({ width: '270px', height: '25px', theme: theme ,formatString: 'Y'});
                                $('#jqxDateTimeInput ').jqxDateTimeInput('setDate', new Date('{{$configs["year"]}}', {{$configs["month"]}}-1, 1)); 
                            });
                            function swichChart(){
                                var getDate= new Date($('#jqxDateTimeInput').jqxDateTimeInput('getDate')); 
                                $("#chart-content").attr("src","{{base_url()}}admin-planners/chart/Chart_Gray_Scale_Month/"+(getDate.getMonth()+1)+"/"+getDate.getFullYear());
                            }
                        </script>
                        {{elseif $configs["ChartType"]=="scaleyear"}}
                        <table style="margin-bottom: 20px">
                            <tr>
                                <td>Năm</td>
                                <td>
                                    <select id="r-year">
                                        <option value="2012">2012</option>
                                        <option value="2013">2013</option>
                                    </select>
                                </td>
                                <td></td>
                                <td>

                                </td>
                                <td>
                                    <input type="button" class="classic-button" onclick="swichChart()" id="report-view" value="Xem"/>
                                </td>
                                <td>

                                </td>
                            </tr>

                        </table>
                        <script>
                            $(document).ready(function () {
                                var theme='classic';
                                $(".jqx_group").jqxExpander({ showArrow: false, toggleMode: 'none', theme: theme });
                                
                            });
                            function swichChart(){
                                
                                $("#chart-content").attr("src","{{base_url()}}admin-planners/chart/Chart_Gray_Scale_Year/"+$("#r-year").val());
                            }
                        </script>
                    {{/if}}
                {{/if}}

                <div style="">
                    <iframe
                        id="chart-content"
                        style="border: 0px;padding: 0;margin: 0;width: 910px;height: 520px"
                        src="{{$configs["ifram"]}}"
                        frameBorder="0"
                        ></iframe>
                </div>

            </div>
        </div>
    </div>
</div>
<script>
  
</script>